<template>
  <el-form ref="form" :model="form" label-width="90px" style="width: 95%;margin: 20px auto;">
    <el-form-item class="elinp" label="学校图片">
      <div v-for="(v,i) in form.synopsisImages" :key="i" class="e-1" style="margin-top: 10px">
        <img :src="v" class="avatar" style="margin-right: 10px">
        <p class="el-p" style="margin-top: -8px;color: #0a76a4" @click="del(v,i)">删除</p>
      </div>
      <el-upload
        ref="upload"
        class="avatar-uploader bg"
        action="https://app.xiangban365.com/app_mobile/upload/file"
        :show-file-list="false"
        :on-error="handleAvatarError"
        :on-success="handleAvatarSuccess1"
        :before-upload="beforeAvatarUpload"
      >
        <i style="border: 1px dashed #d9d9d9" class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </el-form-item>
    <el-form-item label="学校简介" style="margin-top: 20px">
      <el-input v-model="form.synopsisText" class="el-input" type="textarea" />
    </el-form-item>
    <el-form-item label="学校网址">
      <el-input v-model="form.url" />
    </el-form-item>
    <el-form-item label="学校邮箱">
      <el-input v-model="form.email" />
    </el-form-item>
    <el-form-item label="公众号图片">
      <el-upload
        ref="upload"
        class="avatar-uploader"
        action="https://app.xiangban365.com/app_mobile/upload/file"
        :show-file-list="false"
        :on-error="handleAvatarError"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="form.publicUrlLogo" :src="form.publicUrlLogo" class="avatar">
        <i v-else style="border: 1px dashed #d9d9d9" class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </el-form-item>
    <el-form-item label="公众号名字">
      <el-input v-model="form.publicUrl" />
    </el-form-item>
    <el-form-item label="公众号简介">
      <el-input v-model="form.publicUrlText	" />
    </el-form-item>
    <el-form-item label="报名须知">
      <el-input v-model="form.reportRequire" class="textarea" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { addOrUpdShopExpand, getShopExpand } from '@/api/shop'
export default {
  name: 'ShopIntrouce',
  data() {
    return {
      form: {
        email: '',
        publicUrl: '',
        publicUrlLogo: '',
        publicUrlText: '',
        reportRequire: '',
        synopsisImages: [],
        synopsisText: '',
        url: ''
      },
      dialogVisible: false,
      imageUrl: '',
      disabled: false,
      pageNum: 1,
      pageSize: 2
    }
  },
  created() {
    this.change()
  },
  methods: {
    del(v, i) {
      this.form.synopsisImages.splice(i, 1)
    },
    change() {
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getShopExpand(data).then(res => {
        console.log(res)
        this.form = res.dataMap
      })
    },
    onSubmit() {
      console.log(1)
      addOrUpdShopExpand(this.form).then(res => {
        if (res.success) {
          this.dialogFormVisible = false
          this.change()
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    uploadSuccess3(response, file, fileList) {
      console.log(response.dataMap)
      this.form.synopsisImages.push(response.dataMap)
      console.log(this.form.synopsisImages)
    },
    handlePictureCardPreview(file) {
      console.log(file.url)
      this.form.synopsisImages = file.url
      this.dialogVisible = true
    },
    handleAvatarSuccess(res, file) {
      this.form.publicUrlLogo = res.dataMap
    },
    handleAvatarSuccess1(res, file) {
      if (this.form.synopsisImages==null){
        this.form.synopsisImages=[]
      }
      this.form.synopsisImages.push(res.dataMap)
      console.log(this.form.synopsisImages)
    },
    handleAvatarError(err, file, fileList) {
      console.log(err)
    },
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension =
        testmsg === 'jpg' ||
        testmsg === 'JPG' ||
        testmsg === 'png' ||
        testmsg === 'PNG' ||
        testmsg === 'bpm' ||
        testmsg === 'BPM'
      const isLt50M = file.size / 1024 / 1024 < 10
      if (!extension) {
        this.$message({
          message: '上传图片只能是jpg / png / bpm格式!',
          type: 'error'
        })
        return false // 必须加上return false; 才能阻止
      }
      console.log(file)
      if (!isLt50M) {
        this.$message({
          message: '上传文件大小不能超过 10MB!',
          type: 'error'
        })
        return false
      }
      return extension || isLt50M
    }
  }
}
</script>

<style scoped>
.e-1{
  float: left;

}
.avatar-uploader-icon{
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.bg{
  float: left;
  margin-top: 10px;
  margin-right: 10px;
}
.inline{
  display: inline-block;
  margin-right: 20px;
}
.textarea{
  width: 500px;
}
.el-input{
  width: 500px;
}
</style>

